<template>
  <div class="search">

    <el-row>
      <el-col :span="12">
        <el-input v-model="name"  placeholder="输入商品名称"  @change="search" size="small"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="search" icon="el-icon-search" size="small">查询</el-button>
      </el-col>
    </el-row>


    <el-card class="box-card" style="width: 250px; float: right; position: absolute; left: 1010px; top: 105px; z-index: 10" v-if="showResult">
      <div v-for="item in products" :key="products" class="text item" @click="toDetail(item)">
        <el-link type="danger" >{{item.name }}</el-link>
      </div>
    </el-card>

    <!--<input class="search__core" :placeholder="placeholder" v-model="key" />-->
    <!--<button class="search__btn" @click.prevent="search">搜索</button>-->
  </div>
</template>

<script>
import { ref, defineComponent, onMounted } from '@vue/composition-api';
import {getProductByEs} from '../api/user/product'
import {useNav} from "../hooks";
import {RouterMap} from "../utils/constants";
export default {

  data() {
    return {
      name: '',
      products: [],
      showResult: false,
    }
  },

  methods: {
    search() {
      getProductByEs(this.name).then(response => {
        this.products = response.data.products;
        this.showResult = true;
        console.log("search products")
        console.log(this.products)
      }).catch(error => {
        console.log(error)
      })
    },

    toDetail(data) {
      console.log("data");
      console.log(data)
      this.$router.push({path: '/detail', query: {itemId: data.id}})
      this.showResult = false;
      this.name = '';

    }
  }

}
// export default defineComponent({
//   props: {
//     searchData: null,
//     placeholder: String,
//     name: '',
//     products:[],
//     loading: true,
//     results: []
//   },
//   setup(props, context, { emit }) {
//     const { to, getQuery, toParam } = useNav(context);
//     const key = ref('');
//
//     const search = (name) => {
//       console.log("name");
//       console.log(name)
//       getProductByEs(name).then(response => {
//         props.products = response.data.products;
//         console.log("search products")
//         console.log(this.products)
//       }).catch(error => {
//         console.log(error)
//       })
//
//       emit('search', key.value);
//     };
//
//     const toDetail = (data) => {
//       console.log("data  的ID");
//       console.log(data);
//
//       // toParam(RouterMap.Detail, {itemId: data.id})
//
//     };
//
//     return { key, search, toDetail };
//   },
//
// });
</script>

<style>
.search{
  width: 500px;
  margin-right: -150px !important;
}
</style>

<!--<style lang="less" scoped>-->
<!--.search {-->
<!--  position: relative;-->

<!--  &__core {-->
<!--    box-sizing: border-box;-->
<!--    vertical-align: middle;-->
<!--    background: none;-->
<!--    outline: none;-->
<!--    height: 24px;-->
<!--    border: 2px solid rgb(255, 48, 48);-->
<!--    background-color: #fff;-->
<!--    padding-left: 10px;-->
<!--  }-->
<!--  &__btn {-->
<!--    vertical-align: middle;-->
<!--    display: inline-flex;-->
<!--    justify-content: center;-->
<!--    align-items: center;-->
<!--    width: 2.5rem;-->
<!--    height: 24px;-->
<!--    margin: 0px;-->
<!--    outline: none;-->
<!--    border: 2px solid rgb(255, 48, 48);-->
<!--    background: rgb(255, 48, 48);-->
<!--    color: #fff;-->
<!--    cursor: pointer;-->
<!--  }-->
<!--}-->
<!--</style>-->
